<template>
  <div class="forget">
    <loginBase>
      <div class="box" slot="box">
        <ul class="form">
          <li class="inputLi">
            <input type="text" v-model="userPhone" placeholder="请输入手机号">
          </li>
          <li class="inputLi">
            <input type="number" v-model="msgCode" placeholder="请输入验证码">
            <span class="getCode" v-show="!isRuning" @click="getMsg">获取验证码</span>
            <span class="runCode getCode" v-show="isRuning">{{ time }}s</span>
          </li>
          <li class="inputLi">
            <input type="password" v-model="password" placeholder="新密码(6-20个字符)">
          </li>
          <li class="inputLi">
            <input type="password" v-model="rePassword" placeholder="确认新密码">
          </li>
        </ul>
        <div class="operate">
          <strong></strong>
          <span @click="$router.push({name: 'login'})">返回登录</span>
        </div>
        <div class="footer">
          <b class="toReg" @click="sureReset">确认重置</b>
        </div>
      </div>
    </loginBase>
  </div>
</template>
<script type="text/ecmascript-6">
import LoginBase from '../base/loginBase/newLogBase'
import { getMessage } from '../../assets/js/message.js'
import md5 from 'md5'
export default {
  name: 'forget',
  mixins: [getMessage],
  components: {
    LoginBase
  },
  data () {
    return {
      userPhone: '',
      msgCode: '',
      password: '',
      rePassword: '',
      isRuning: false,
      time: ''
    }
  },
  methods: {
    sureReset () {
      if (this.userPhone === '') {
        this.$message({
          message: '请输入用户手机号',
          type: 'warning'
        })
      } else if (this.msgCode === '') {
        this.$message({
          message: '请输入短信验证码',
          type: 'warning'
        })
      } else if (this.password === '') {
        this.$message({
          message: '请输入新密码',
          type: 'warning'
        })
      } else if (this.rePassword === '') {
        this.$message({
          message: '请再次输入新密码',
          type: 'warning'
        })
      } else if (this.password !== this.rePassword) {
        this.$message({
          message: '两次密码不一致',
          type: 'warning'
        })
      } else {
        this.forget()
      }
    },
    forget () {
      this.$ajax.post('/api/seller/account/resetPwd', {
        telephone: this.userPhone,
        code: this.msgCode,
        type: 2,
        password: md5(this.password)
      }).then((data) => {
        if (data.data.code === '200') {
          this.$message({
            message: '重置成功',
            type: 'success',
            onClose: () => {
              this.$router.push({ name: 'login' })
            }
          })
        } else {
          this.$message({
            message: data.data.message,
            type: 'warning'
          })
        }
      }).catch((err) => {
        console.error(err)
        this.$message({
          message: '生意太火爆了, 请稍后再试',
          type: 'error'
        })
      })
    },
    getMsg () {
      if (this.userPhone === '') {
        this.$message({
          message: '请输入用户手机号',
          type: 'warning'
        })
      } else {
        this.sedMsg()
      }
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.forget
  width 100%
  height 100%
  .box
    width 360px
    .form
      border 1px solid #DDDDDD
      border-radius 10px
      li
        height 60px
        box-sizing border-box
        padding 20px
        display flex
        border-bottom 1px solid #DDDDDD
        align-items center
        &:last-child
          border none
        input
          flex 1
          border none
          outline none
          -webkit-appearance none
          font-size 15px
          line-height 40px
        .getCode
          min-width 100px
          font-size 15px
          line-height 40px
          color #F16591
          cursor pointer
          border-left 1px solid #eeeeee
          text-align center
          padding-left 20px
        .runCode
          cursor not-allowed
    .operate
      display flex
      justify-content space-between
      font-size 12px
      line-height 18px
      margin-bottom 30px
      margin-top 5px
      strong
        font-size 12px
        line-height 18px
        color #999999
      span
        color #F16591
        cursor pointer
    .footer
      display flex
      align-items center
      justify-content center
      b
        width 172px
        height 45px
        line-height 45px
        text-align center
        font-size 20px
        font-weight bold
        border-radius 10px
        cursor pointer
        background #F16591
        color #ffffff
        box-shadow 0 0 5px RGBA(241, 101, 145, 0.3)
</style>
